<template>
	<tm-fullView>
		<tm-menubars title="tm-propress" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b">进度条,当前值:{{jd}}</view>
			<view class="my-36">
				<tm-propress @change="change" v-model="jd"></tm-propress>
			</view>
			<tm-button theme="bg-gradient-blue-accent" :round="12" size="m" @click="jd+=10">+10</tm-button>
			<tm-button theme="bg-gradient-orange-accent" :round="12" size="m" @click="jd-=10">-10</tm-button>
		</tm-sheet :shadow="24">
		<tm-sheet>
			<view class="text-size-s text-weight-b ">换主题及自定义</view>
			<view class="my-32">
				<tm-propress color="yellow" v-model="jd"></tm-propress>
			</view>
			
			<view class="my-32 ">
				<tm-propress color="green" v-model="jd"></tm-propress>
			</view>
			<view class="my-32">
				<tm-propress color="bg-gradient-orange-accent" v-model="jd"></tm-propress>
			</view>
			<view class="my-32">
				<tm-propress bg-color="bg-gradient-blue-accent" color="bg-gradient-yellow-accent" v-model="jd"></tm-propress>
			</view>
			<view class="my-36">
				<tm-propress :height="12"  color="pink" v-model="jd">
					<template v-slot:default="{value}">
						<view class="red rounded text-align-center" style="width: 50rpx;height:50rpx">
							<view >
								<tm-icons color="white" name="icon-QQ"></tm-icons>
							</view>
						</view>
					</template>
				</tm-propress>
			</view>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b ">加载条</view>
			<view class="my-32">
				<tm-propress color="bg-gradient-blue-accent"  :loading="true"></tm-propress>
			</view>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b">环形，半圆,当前值:{{jd}}</view>
			<view class="my-32">
				<tm-propressRound v-model="jd"></tm-propressRound>
				<tm-propressRound semicircle :line-width="16" v-model="jd"></tm-propressRound>
				<tm-propressRound  :line-width="5" 
				:size="60" bgcolor="#4e6287" :color="['rgb(0,255,0)','rgb(0,0,255)','rgb(255,0,255)']" v-model="jd">
					<template v-slot:default="{value}">
						<text class="text-size-xs">{{value}}元</text>
					</template>
				</tm-propressRound>
			</view>
			
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPropressRound from "@/tm-vuetify/components/tm-propressRound/tm-propressRound.vue"
	import tmPropress from "@/tm-vuetify/components/tm-propress/tm-propress.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmPropressRound,tmPropress,tmIcons},
		data() {
			return {
				jd:35
			}
		},
		methods: {
			change(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
